import { Card, Col, Row } from 'antd'
import React, { useEffect } from 'react'
import * as echarts from 'echarts';
import './index.css'
import bar from './options/bar';
import sunburst from './options/sunburst';
import radar from './options/radar';

export default function DashBoard() {

  useEffect(()=>{ //等到UI元素渲染后才执行
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));
    // 绘制图表
    myChart.setOption(bar);

    // 旭日图
    var sunChart = echarts.init(document.getElementById('sunburst'));
    sunChart.setOption(sunburst);

    // 雷达图
    var radarChart = echarts.init(document.getElementById('radar'));
    radarChart.setOption(radar);
  },[])

  return (
    <Row gutter={16}>
        <Col span={12} >
          <Card title="热门景点统计" extra={<a href="#">More</a>}>
              <div className='chart' id="bar">图标渲染</div>
          </Card>
        </Col>

        <Col span={12} >
          <Card title="旭日图" extra={<a href="#">More</a>}>
              <div className='chart' id="sunburst">图标渲染</div>
          </Card>
        </Col>

        <Col span={12} >
          <Card title="雷达图" extra={<a href="#">More</a>}>
              <div className='chart' id="radar">图标渲染</div>
          </Card>
        </Col>

        <Col span={12} >
          <Card title="" extra={<a href="#">More</a>}>
              <div className='chart'>图标渲染</div>
          </Card>
        </Col>
    </Row>
    
  )
}
